<template>

  <div style="margin:40px;">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span style="margin:0;font-size:18px;font-weight:bold;">{{ this.$route.meta.title }}</span>
        <el-button style="float: right; padding:3px 0" type="text" @click="cancelForm">返回列表</el-button>
      </div>
      <div style="max-width:1000px;margin:auto;">
        <el-form
          ref="form"
          :model="form"
          :rules="form.houseType==0?rulesPesonal:rules"
          class="table-form"
          size="small"
        >
          <table class="table table-bordered th-bg">
            <tbody>
            <tr>
              <th width="15%">被检查企业社会信用代码</th>
              <td width="35%">
                <el-form-item prop="creditCode">
                  <el-input v-model="form.creditCode"/>
                </el-form-item>
              </td>
              <th width="15%">被检查企业名称</th>
              <td width="35%">
                <el-form-item prop="enterpriseName">
                  <el-input v-model="form.enterpriseName"/>
                </el-form-item>
              </td>
            </tr>
            <tr>
              <th width="15%">实际检查日期</th>
              <td>
                <el-form-item prop="inspectDate">
                  <el-date-picker
                    v-model="form.inspectDate"
                    clearable
                    size="small"
                    placeholder="请选择实际检查日期"
                    value-format="yyyy-MM-dd"
                    format="yyyy-MM-dd"
                    class="filter-item"
                  />
                </el-form-item>
              </td>
              <th width="15%">检查类型</th>
              <td width="35%">
                <el-form-item prop="inspectType">
                  <el-select
                    v-model="form.inspectType"
                    clearable
                    size="small"
                    placeholder="检查类型"
                    class="filter-item"
                  >
                    <el-option
                      v-for="item in inspectTypeList"
                      :key="item.label"
                      :label="item.label"
                      :value="item.label"
                    />
                  </el-select>
                </el-form-item>
              </td>
            </tr>
            <tr v-if="form.inspectType=='单独检查'">
              <th width="15%">检查单位</th>
              <td width="35%">
                <el-form-item prop="inspectDept1">
                  <el-input v-model="form.inspectDept1"/>
                </el-form-item>
              </td>
              <th width="15%">检查事项</th>
              <td width="35%">
                <el-form-item prop="inspectItems1">
                  <el-input v-model="form.inspectItems1"/>
                </el-form-item>
              </td>
            </tr>
            <tr v-if="form.inspectType=='单独检查'">
              <th width="15%">检查意见</th>
              <td colspan="3">
                <el-form-item prop="inspectOpinion1">
                  <el-input v-model="form.inspectOpinion1"/>
                </el-form-item>
              </td>
            </tr>

            <tr v-if="form.inspectType!='单独检查'">
              <th width="15%">检查单位1</th>
              <td width="35%">
                <el-form-item prop="inspectDept1">
                  <el-input v-model="form.inspectDept1"/>
                </el-form-item>
              </td>
              <th width="15%">检查事项1</th>
              <td width="35%">
                <el-form-item prop="inspectItems1">
                  <el-input v-model="form.inspectItems1"/>
                </el-form-item>
              </td>
            </tr>
            <tr v-if="form.inspectType!='单独检查'">
              <th width="15%">检查意见1</th>
              <td colspan="3">
                <el-form-item prop="inspectOpinion1">
                  <el-input v-model="form.inspectOpinion1"/>
                </el-form-item>
              </td>
            </tr><tr v-if="form.inspectType!='单独检查'">
              <th width="15%">检查单位2</th>
              <td width="35%">
                <el-form-item prop="inspectDept2">
                  <el-input v-model="form.inspectDept2"/>
                </el-form-item>
              </td>
              <th width="15%">检查事项2</th>
              <td width="35%">
                <el-form-item prop="inspectItems2">
                  <el-input v-model="form.inspectItems2"/>
                </el-form-item>
              </td>
            </tr>
            <tr v-if="form.inspectType!='单独检查'">
              <th width="15%">检查意见2</th>
              <td colspan="3">
                <el-form-item prop="inspectOpinion2">
                  <el-input v-model="form.inspectOpinion2"/>
                </el-form-item>
              </td>
            </tr>
            </tbody>
          </table>
          <div style="display:flex; align-item: center; justify-content: center; margin-top:20px;">
            <el-button
              :loading="loading"
              type="primary"
              size="small"
              @click="submitForm"
            >
              {{isEdit ? '更新检查记录' : '新增检查记录'}} 
            </el-button>            
          </div>
        </el-form>
      </div>
    </el-card>
  </div>
</template>

<script>
import crudRecord from '@/api/business/synthesis/record'
import { MessageBox } from 'element-ui'
import { inspectTypeList } from '@/utils/index.js'

const defaultForm = {
  
}

export default {
  components: {
  },
  computed: {
  },
  props: {
    isEdit: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      inspectTypeList,
      form: JSON.parse(JSON.stringify(defaultForm)),
      rules: {
        creditCode: [
          {
            required: true,
            message: '请输入被检查企业社会信用代码'
          }
        ],
        enterpriseName: [
          {
            required: true,
            message: '请输入被检查企业名称'
          }
        ],
        inspectDate: [
          {
            required: true,
            message: '请选择实际检查日期'
          }
        ],
        inspectDept1: [
          {
            required: true,
            message: '请输入检查单位'
          }
        ],
        inspectType:[
          {
            required: true,
            message: '请选择检查类型'
          }
        ],
        inspectOpinion1:[
          {
            required: true,
            message: '请输入检查意见'
          }
        ],
        inspectItems1:[
          {
            required: true,
            message: '请输入检查事项'
          }
        ],
        inspectDept2:[
          {
            required: true,
            message: '请输入检查单位'
          }
        ],
        inspectOpinion2:[
          {
            required: true,
            message: '请输入检查单位'
          }
        ],
        inspectItems2:[
          {
            required: true,
            message: '请输入检查事项'
          }
        ],
      },
      loading: false,
      id: null,
    }
  },

  created() {
    if (this.isEdit) {
      this.id = this.$route.params && this.$route.params.id
      this.fetchData(this.id)
    }else {
      this.$set(this.form, 'inspectType', '联合检查')
    }
  },
  updated(){
    if(this.form.inspectType == '联合检查'){
      this.rules.inspectDept2.push({
        required: true,
        message: '请输入检查单位'
      })
      this.rules.inspectOpinion2.push({
        required: true,
        message: '请输入检查意见'
      })
      this.rules.inspectItems2.push({
        required: true,
        message: '请输入检查事项'
      })
    }
    else{
      this.rules.inspectDept2.pop()
      this.rules.inspectOpinion2.pop()
      this.rules.inspectItems2.pop()
    }
  },
  computed: {
    
  },
  methods: {
    fetchData(id) {
      crudRecord.get(id).then(response => {
        this.form = Object.assign({}, this.form, response.data)
      }).catch(err => {
        console.log(err)
      })
    },
    cancelForm() {
      this.$router.push('/business/synthesis/record')
    },

    submitForm() {
      this.$refs.form.validate(valid => {
        if (!valid) {
          return
        }
        MessageBox.confirm('您确认执行此操作吗？', '确认操作', {
          confirmButtonText: '确认',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.loading = true
          if (this.isEdit) {
            crudRecord.edit(this.form).then(() => {
              this.$notify({
                title: '成功',
                message: '修改信息成功',
                type: 'success',
                duration: 2000
              })
              this.loading = false
              this.cancelForm()
            }).catch(err => {
              console.log(err)
              this.loading = false
            })
          } else {
            crudRecord.add(this.form).then(() => {
              this.$notify({
                title: '成功',
                message: '提交信息成功',
                type: 'success',
                duration: 2000
              })
              this.loading = false
              this.cancelForm()
            }).catch(err => {
              console.log(err)
              this.loading = false
            })
          }
        }).catch((e) => {
          console.log(e)
        });
      })
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
::v-deep .el-input-number .el-input__inner {
  text-align: left;
}

.amap-wrapper {
  width: 500px;
  height: 500px;
}

::v-deep .map-dialog .el-dialog__body {
  padding: 10px 20px;
}

</style>